.header {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 330px);
  align-items: center;

  /*
   * the content header has some padding
   * we need to apply some right padding to this container then
   */
  padding-right: 15px;
  @media screen and (min-width: 30em) {
    padding-right: 40px;
  }
}

.RuleProviderItemWrapper {
  padding: 6px 15px;
  @media screen and (min-width: 30em) {
    padding: 10px 40px;
  }
}
